<template>
  <form-box headText="制品明细">
    <el-button size="small" @click.native="addCstProduct" slot="btn">增加制品信息</el-button>
    <el-table :data="reqData.compute_info.cst_products"
              border fit highlight-current-row style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column align="center" label="制品编号" max-width="20%">
        <template scope="scope">
          <span v-show="!scope.row.isEdit">{{scope.row.cst_prod_no}}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.cst_prod_no"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="制品名称" max-width="20%">
        <template scope="scope">
          <span v-show="!scope.row.isEdit">{{scope.row.cst_prod_name}}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.cst_prod_name"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="腔数" max-width="20%">
        <template scope="scope">
          <span v-show="!scope.row.isEdit">{{scope.row.cavity_total}}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.cavity_total"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="模型" max-width="20%">
        <template scope="scope">
          <el-upload
            action="上传地址"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">单个文件大小不超过5MB</div>
          </el-upload>
          <!--<span v-show="!scope.row.isEdit">{{scope.row.prod_model_pic.name}}/{{scope.row.prod_model_pic.url}}</span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.prod_model_pic.name"></el-input>-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" max-width="20%">
        <template scope="scope">
          <el-button :type="scope.row.isEdit?'success':'primary'"
                     size="small"
                     @click.native='scope.row.isEdit=!scope.row.isEdit'
                     icon="edit">{{scope.row.isEdit?'完成':'编辑'}}</el-button>
          <el-button
            size="small"
            type="danger"
            @click="delProduct(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </form-box>
</template>
<script>
  import formBox from '../../../../components/formBox.vue'
  import { deleteProduct } from '@/api/cstOrder/compute'
  export default {
    name:'createComputeProducts',
    components:{
      formBox
    },
    data(){
      return {
        fileList:[],
      }
    },
    props:[
      'reqData'
    ],
    methods:{
      addCstProduct(){
        let product = {
          isEdit:true,
          cavity_total:'请填写',
          cst_prod_no:'请填写',
          cst_prod_name:'请填写',
          prod_model_pic:{
            name:'请填写',
            url:'请填写'
          },
        }
        this.reqData.compute_info.cst_products.push(product)
      },
      delProduct(index){
        this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let req_delPro = {
            client_type:1,
            compute_id:this.reqData.compute_id,
            prod_list:[this.reqData.compute_info.cst_products[index].cst_product_id]
          }
          deleteProduct(req_delPro)
            .then(res => {
              this.reqData.compute_info.cst_products.splice(index,1)
              this.$message({
                type: 'success',
                message: '删除成功'
              });
            })
            .catch(err => {
              console.log(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeUpload(file){
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.error('单个文件大小不能超过 5MB!');
        }
        return isLt5M;
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
